<template>
	<Row>
		<Col span="4" push="10">
		<Button>Default</Button>
		<Button type="primary">Primary</Button>
		<Button type="ghost">Ghost</Button>
		<Button type="dashed">Dashed</Button>
		<Button type="text">Text</Button>
		<br />
		<br />
		<Button type="info">Info</Button>
		<Button type="success">Success</Button>
		<Button type="warning">Warning</Button>
		<Button type="error">Error</Button>
		<br>
		<br />
		<Button type="ghost" shape="circle" icon="ios-search"></Button>
		<Button type="ghost" icon="ios-search">Search</Button>
		<Button type="ghost" shape="circle" icon="ios-search">Search</Button>
		<Button type="ghost" shape="circle">Circle</Button>
		<br />
		<br />
		<Button type="primary" :loading="loading" @click="toLoading">
	        <span v-if="!loading">Click me!</span>
	        <span v-else>Loading...</span>
	    </Button>
		</Col>
	</Row>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
			}
		},
		methods: {
			toLoading() {
				this.loading = true;
			}
		}
	}
</script>

<style>

</style>